<template>
  <el-dialog
    style="width: 90%;"
    title="导入用户"
    :append-to-body="true" :close-on-click-modal="false"
    :visible.sync="visible"
    @close="dialogClose"
  >
    <div style="height: 200px;">
      <el-form :model="formFile" :inline="true"  label-width="120px" style="margin: 5px;">
        <el-row>
           <el-col :span="24"  style="height: 50px;">
             <el-form-item label="已选部门" class="dd-label" prop="dpName">
               <el-input  v-model="importDept.deptName" disabled style="width: 420px" placeholder="请选择部门"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
<!--         <el-row>
            <el-col :span="24"  style="height: 50px;">
              <el-form-item label="当前部门ID" class="dd-label" prop="deptId">
                <el-input  v-model="importDept.deptId" disabled style="width: 420px" placeholder=""></el-input>
              </el-form-item>
            </el-col>
          </el-row> -->
        <el-row>
           <el-col :span="24"  style="height: 50px;">
             <el-form-item label="excel文件" class="dd-label" prop="xxxx">
               <el-upload
                 ref="upload"
                 :action="uploadUrl"
                 :file-list="fileList"
                 class="upload-demo"
                 :headers="headers"
                 :limit="1"
                 :data="importDept"
                 :accept="accept"
                 :before-upload="beforeCheck"
                 :on-exceed="handleExceed"
                 :on-change="submitUpload"
                 :on-error="errorUpload"
                 :on-success="successUpload"
                 :auto-upload="false">
                 <el-button size="mini" type="primary">选择文件<i class="el-icon-upload el-icon--right"></i></el-button>
                  <el-button size="mini" type="primary" @click.stop="download">模板下载<i class="el-icon-download el-icon--right"></i></el-button>
                 <span class="el-upload__tip"> tips:只能上传Excel文件!</span>
               </el-upload>
             </el-form-item>
           </el-col>
         </el-row>
      </el-form>

    </div>

  </el-dialog>
</template>

<script>
  import { getToken } from '@/utils/auth'

  export default {
    props: {
      importDept: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        uploadUrl: process.env.BASE_API + '/api/importUser',
        downLoadUrl: process.env.BASE_API + '/api/downLoadUserTel',
        visible: false,
        formFile:{},
        keyWords: '',
        fileList: [],
        errorInfo: false,
        headers: {
          'Authorization': 'Bearer ' + getToken()
        }
      }
    },
    computed: {
      accept() {
        return '.xls,.xlsx'
      }
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit()
      },
      handleExceed(files, fileList) {
        this.$message.error(
          `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
            files.length + fileList.length
          } 个文件`
        )
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      successUpload(response, file, fileList) {
        this.$message.success('导入成功')
        this.$refs.upload.clearFiles()
        this.visible=false
        this.$parent.init();
      },
      errorUpload(err, file, fileList) {
        this.$refs.upload.clearFiles()
        this.$message.error('上传失败,请检查模板是否正确填写或稍后重试')
      },
      download() {
        window.location.href = this.downLoadUrl
      },
      downloadError() {
        error({})
          .then(() => {
            this.$message.success('下载成功')
            this.errorInfo = false
          })
          .catch(err => {
            this.$message.error(err.message)
            this.errorInfo = false
          })
      },
      dialogClose() {
        this.$refs.upload.clearFiles()
      },
      // 上传文件之前
      beforeCheck(file) {
        let strArr = file.name.split('.')
        let bType = '.' + strArr[strArr.length - 1]
        if (this.accept.indexOf(bType) === -1) {
          this.$message.error('文件格式不正确请重新选择！')
          this.$refs.upload.clearFiles()
          return false
        }
        return true
      }
    }
  }
</script>
